<template>
  <view class="reportExDetail_container app_container_page">
    <view class="app_bgwith_wave reportdetail_content">
      <appReportItem :item="studentReportResult" :showUnLock="false" />
    </view>
    <view class="exDetail_content">
      <view class="app_dashed_title">
        <text>测试结果</text>
      </view>
      <view class="result_table">
        <view class="table_row table_head">
          <view class="table_cell">项目</view>
          <view class="table_cell">结果</view>
          <view class="table_cell">全国同龄平均值</view>
        </view>
        <view class="table_row" v-for="item of eightPhysicalList" :key="item.physicalName">
          <view class="table_cell">{{ item.text }}</view>
          <view class="table_cell">{{ item.physicalValue ? `${item.physicalValue}${item.unit}` : '' }}</view>
          <view class="table_cell">{{ isUnlock ? `${item.physicalAverage || ''}${item.unit}` : '' }}</view>
        </view>
        <view v-if="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_y lock_for_result"></view>
      </view>
      <view class="app_dashed_title">
        <text>体质情况及评价</text>
      </view>
      <view class="report_eightItem_box">
        <eightItem v-for="item of eightPhysicalList" :item="item" :key="item.physicalName" @EIGHTITEM_CLICK="handleEightClick" />
      </view>

      <view class="app_dashed_title">
        <text>BMI值</text>
      </view>
      <view class="evaluation_box evaluation_bmi">
        <text class="text_center">{{ studentName }}的体型和哪个相近？</text>
        <view class="evaluation_img">
          <view class="mark" :style="{ left: ['', '0', '145rpx', '310rpx', '486rpx'][bmi.itemLevel] }">这是我</view>
        </view>
        <view v-if="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_x lock_for_bmi"></view>
        <view v-else class="evaluation_content">
          <view class="bmi_remark">
            <view>与同龄人相比，{{ studentName }}的体重表现为{{ ['', '偏瘦', '正常', '过重', '肥胖'][bmi.itemLevel] }}。</view>
          </view>
          <view class="bmi_summary">
            {{ bmi.itemRemark }}
          </view>
        </view>
        <view class="bmi_bottom">
          <view class="icon"></view>
          <view @click="showBmiPopup = true">什么是BMI?</view>
        </view>
      </view>

      <view class="app_dashed_title">
        <text>遗传身高</text>
      </view>
      <view class="evaluation_box evaluation_targetHeight">
        <view class="evaluation_img"></view>
        <text class="text_center">{{ studentName }}的当前遗传身高: {{ targetHeight.itemValue || '' }}cm</text>
        <view v-if="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_y lock_for_targetHeight"></view>
        <view v-else class="evaluation_content">{{ targetHeight.itemRemark || '' }}</view>
      </view>

      <view class="app_dashed_title">
        <text>综合评价</text>
      </view>
      <view class="evaluation_box evaluation_assessment">
        <view v-show="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_y lock_for_assessment"></view>
        <view v-if="isUnlock && showRadarEc" class="assessment_radar">
          <!-- NOTE: 真机预览暂无问题 force-use-old-canvas="true" -->
          <uni-ec-canvas
            class="uni-ec-canvas"
            id="assessment_radar_canvas"
            ref="assessment_radar_canvas"
            canvas-id="assessment_radar_canvas"
            :ec="radarEc"
            @inited="hadnleRadarEcInited"
          ></uni-ec-canvas>
          <view
            v-if="per.physicalName != 'height' && per.physicalName != 'weight'"
            v-for="per of radarEc.option.radar.indicator"
            class="assessment_icon"
            :class="per.physicalName"
            :key="per.physicalName"
          >
            <text>{{ getAssessmentText(per.physicalName) }}</text>
          </view>
        </view>
        <text class="text_center">{{ studentName }}的最强项：{{ assessment.theMostStrongText || '' }}</text>
        <view v-if="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_x lock_for_assessment"></view>
        <text v-else>{{ assessment.theMostStrongPoint || '' }}</text>
        <text class="text_center">{{ studentName }}的最弱项：{{ assessment.theMostWeaknessText || '' }}</text>
        <view v-if="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_x lock_for_assessment"></view>
        <text v-else>{{ assessment.theMostWeaknessPoint || '' }}</text>
      </view>

      <view class="app_dashed_title">
        <text>{{ studentName }}出生方式</text>
      </view>
      <view class="evaluation_box evaluation_bornWay">
        <view v-if="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_y lock_for_bornWay"></view>
        <view v-else class="evaluation_content">
          <view class="bornWay_row">
            <view class="bornWay_value">{{ bornWay.itemName }}</view>
          </view>
          <text>{{ bornWay.itemExplain }}</text>
          <view class="evaluation_img"></view>
        </view>
      </view>

      <view class="app_dashed_title">
        <text>{{ studentName }}的膳食营养分析</text>
      </view>
      <view class="evaluation_box evaluation_healthDiet">
        <text>1.保持营养均衡，参照每日食物建议。</text>
        <text>2.每天让孩子活动1小时。 </text>
        <text>3.尽量不玩手机，晚上10点前睡觉。</text>
        <view v-if="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_x lock_for_healthDiet"></view>
        <view v-else class="evaluation_content">
          <text class="text_center">根据 {{ studentName }} 的检测结果可能存在的膳食问题</text>
          <view class="healthDiet_content">{{ healthDiet.itemRemark }}</view>
        </view>
      </view>

      <view class="app_dashed_title">
        <text>博士点评</text>
      </view>
      <view class="evaluation_box evaluation_drReview">
        <view class="evaluation_img">
          <view class="drReview_value">
            <text>总得分</text>
            <view>
              <text class="value">{{ drReview.itemValue }}</text>
              分
            </view>
          </view>
        </view>
        <view v-if="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_y lock_for_drReview"></view>
        <view v-else class="evaluation_content">
          <rankWithLegend :rankList="drReview.districtLevelList" :physical="drReview.itemKey" />
          <view class="drReview_content">
            {{ drReview.itemRemark }}
          </view>
        </view>
      </view>

      <view class="app_dashed_title" v-if="growthMapList.length > 0">
        <text>{{ studentName }}生长发育监测图</text>
      </view>

      <view class="growth_box" v-for="growth of growthMapList" :key="growth.itemName">
        <view class="growth_box_top" @click="handleGrowthExpand(growth)">
          <view class="growth_icon" :class="growth.itemName"></view>
          <view class="g_top_content">
            <view class="value_text">{{ growth.name }}: {{ growth.itemValue }}{{ growth.unit }}</view>
            <!-- <view v-show="growth.expand" class="change_text">同比{{ growth.changeState }}{{ growth.changeResult }}{{ growth.unit }}</view> -->
            <view v-show="growth.expand" class="change_text">{{ growth.changeState }}</view>
          </view>
          <view v-show="growth.expand" class="change_btn">{{ growth.changeResult }}</view>
          <van-icon :name="growth.expand ? 'arrow-up' : 'arrow-down'" />
        </view>
        <view v-show="!isUnlock" @click="handleUnlockBoxClick" class="lock_block lock_block_y lock_for_growth" :class="[growth.expand ? 'expand' : '']"></view>
        <view v-show="isUnlock" class="growth_content" :class="[growth.expand ? 'expand' : '']">
          <view class="growth_unit_row"> 单位: {{ growth.unit }} </view>
          <view class="growth_line">
            <uni-ec-canvas class="uni-ec-canvas" :ref="`growth_line_canvas_${growth.itemName}`" :canvas-id="`growth_line_canvas_${growth.itemName}`" :ec="growth.ec"></uni-ec-canvas>
          </view>
          <view class="growth_bottom">
            <view>反映内容</view>
            <text>{{ growth.reactContent }}</text>
            <view>评价</view>
            <text>{{ growth.itemAppraise }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="exDetail_bottom">
      <template v-if="isUnlock">
        <view class="rd_button save" @click="handleSave">保存</view>
        <button open-type="share" id="share" class="rd_button share">分享</button>
        <button open-type="share" id="compare" class="rd_button compare">对比</button>
        <!-- <button class="rd_button compare" @click="showUnlockPopup = true">对比</button> -->
        <view class="rd_button collect" :class="[isCollect ? 'unCollect' : 'collect']" @click="handleCollectClick">{{ isCollect ? '取消收藏' : '收藏' }}</view>
      </template>
      <template v-else>
        <view class="to_unlock_btn" @click="handleUnlockBoxClick">解锁专家报告</view>
      </template>
    </view>

    <appPopup class="eightItem_popup" :show.sync="showEightPopup">
      <view class="eightItem_popup_content">
        <view class="eight_title eight_title_height" :class="[`eight_title_${eightPopupItem.physicalName}`]"></view>
        <view class="eight_comment">
          <text class="comment_text">评价：{{ eightPopupItem.physicalAppraise || '' }}</text>
          <view class="eight_value">
            <text>{{ eightPopupItem.physicalScore }}</text>
            分
          </view>
        </view>
        <rankWithLegend :rankList="eightPopupItem.districtLevelList" :physical="eightPopupItem.physicalName" />
      </view>
    </appPopup>

    <appPopup class="bmi_popup" :show.sync="showBmiPopup">
      <view class="bmi_popup_img"></view>
      <text class="bmi_popup_text">BMI指数（Body Mass Index）是指身体指数， 简称体质指数又称体重指数，是国际衡量人体 胖瘦程度以及是否健康的一个标准。与身高和 体重有关系，计算方法为：</text>
      <text class="bmi_popup_text">BMI=体重（kg）/身高²(m)²</text>
      <view class="bmi_popup_bottom">
        <view class="app_popup_button" @click="showBmiPopup = false">我了解了</view>
      </view>
    </appPopup>

    <appPopup class="unlock_popup" :show.sync="showUnlockPopup">
      <view class="unlock_popup_title"> 专家解析报告 </view>
      <view class="unlock_popup_switchList">
        <view class="per_unlock" v-for="(item, index) of unlockSwitchList" :key="index">
          <text>{{ item.text }}</text>
          <van-switch class="unlock_switch" size="35rpx" :checked="item.checked" disabled />
        </view>
      </view>
      <view class="unlock_popup_bottom">
        <view class="bottom_item">
          <view class="tip">原价{{ oldPrice }} 限时<text>1.5</text>折</view>
          <view class="u_p_b_btn" @click="handleUnlockClick">
            <text>￥{{ price }}</text>
            立即购买
          </view>
        </view>
      </view>
    </appPopup>
  </view>
</template>

<script>
import { collectProduct, isCollect, cancelCollect } from '@/api/home'
import { getReportDetailStudent, getReportDetailPhysical, getReportDetailOther, getReportDetailMap, getPoster } from './api'
import { getReportPrice } from '@/api/report'
import appPopup from '@/components/app/app_popup'
import appReportItem from '@/components/app/app_report_item'
import eightItem from './components/eightItem'
import rankWithLegend from './components/rankWithLegend'
import eightPhysical from '@/util/eightPhysical'
import uniEcCanvas from '@/components/app_component/uni-ec-canvas/uni-ec-canvas'
import { downImgToAlbum } from '@/util/helper'

export default {
  name: 'report_exDetail',
  components: {
    appPopup,
    appReportItem,
    eightItem,
    rankWithLegend,
    uniEcCanvas
  },
  data() {
    const eightPhysicalList = Object.keys(eightPhysical).map((per) => ({
      physicalName: per,
      text: eightPhysical[per].text,
      unit: eightPhysical[per].unit
    }))

    return {
      id: '',
      // {isUnlock}
      studentReportResult: {},
      //
      eightPhysicalList,
      showEightPopup: false,
      eightPopupItem: {},
      //
      baseEvaluationList: [],
      showBmiPopup: false,
      //
      assessment: {},
      showRadarEc: false,
      radarEc: {
        // lazyLoad: true,
        option: {
          radar: {
            shape: 'circle',
            indicator: [],
            radius: '100%',
            name: {
              textStyle: {
                color: 'red'
              }
            }
          },
          series: [
            {
              type: 'radar',
              // areaStyle: {normal: {}},
              data: [
                {
                  value: []
                }
              ]
            }
          ]
        }
      },
      //
      growthMapList: [],
      //
      showUnlockPopup: false,
      unlockSwitchList: [
        {
          text: '体质报告指数(CPH)(市级/省级排名)',
          checked: true
        },
        {
          text: '8项体质监测结果(全省同龄平均值)',
          checked: true
        },
        {
          text: '体质情况及评价',
          checked: true
        },
        {
          text: '体质健康排名(班级/年级/园级排名)',
          checked: true
        },
        {
          text: '6项身体素质情况',
          checked: true
        },
        {
          text: 'BMI指数及分析',
          checked: true
        },
        {
          text: '应急反应能力分析',
          checked: true
        },
        {
          text: '遗传身高和环境对现有身高影响',
          checked: true
        },
        {
          text: '博士对您孩子的体质改善方案',
          checked: true
        },
        {
          text: '专属老师一对一服务',
          checked: true
        }
      ],
      //
      price: '',
      pending: false,
      //
      isCollect: false
    }
  },
  computed: {
    // 报告是否解锁
    isUnlock() {
      return this.studentReportResult.isUnlock === '1'
      // return false
    },
    studentName() {
      return this.studentReportResult.studentName || ''
    },
    bmi() {
      return this.getEvaluation('bmi')
    },
    targetHeight() {
      return this.getEvaluation('targetHeight')
    },
    bornWay() {
      return this.getEvaluation('bornWay')
    },
    healthDiet() {
      return this.getEvaluation('healthDiet')
    },
    drReview() {
      return this.getEvaluation('drReview')
    },
    oldPrice() {
      return ~~((this.price ? this.price : 0) / 0.15)
    }
  },
  methods: {
    async fetchIsCollect() {
      try {
        const { data } = await isCollect({
          productId: this.id,
          productType: 3
        })
        this.isCollect = data.isCollect === 1
      } catch (error) {
        console.log(error)
      }
    },
    async fetchReportPrice() {
      try {
        const res = await getReportPrice()
        if (res.code === 200) {
          //
          this.price = res.data.price
        }
      } catch (error) {
        console.log(error)
      }
    },
    async fetchReportDetail() {
      this.fetchReportDetailStudent()
      this.fetchReportDetailPhysical()
      this.fetchReportDetailOther()
      // try {
      //   const { data } = await getReportDetail(this.id)
      //   console.log(data)
      //   this.studentReportResult = data.studentReportResult
      //   this.eightPhysicalList = data.eightPhysicalList.map((per) => {
      //     const eightPhysicalObj = eightPhysical[per.physicalName]
      //     return {
      //       ...per,
      //       unit: eightPhysicalObj.unit,
      //       text: eightPhysicalObj.text
      //     }
      //   })
      //   this.baseEvaluationList = data.baseEvaluationList

      //   // 综合评价
      //   this.initAssessment(data.assessment)
      //   if (data.previousReportNumber > 0) {
      //     // 生长发育图
      //     this.initGrowthMapList(data.growthMapList)
      //   }
      // } catch (error) {
      //   console.log(error)
      // }
    },
    async fetchReportDetailStudent() {
      try {
        const { data } = await getReportDetailStudent(this.id)
        // console.log(data)
        const studentReportResult = data.studentReportResult
        delete studentReportResult.eightPhysicalList
        this.studentReportResult = studentReportResult

        if (studentReportResult.previousReportNumber > 0) {
          // 成长曲线
          this.fetchReportDetailMap()
        }
      } catch (error) {
        console.log(error)
      }
    },
    async fetchReportDetailPhysical() {
      try {
        const { data } = await getReportDetailPhysical(this.id)
        // 排序
        this.eightPhysicalList = data.eightPhysicalList
          .sort((a, b) => {
            const order = ['height', 'weight', 'standingJump', 'tennisThrow', 'balanceBeam', 'sitAndReach', 'tenMeterTurn', 'doubleJump']
            return order.indexOf(a.physicalName) - order.indexOf(b.physicalName)
          })
          .map((per) => {
            const eightPhysicalObj = eightPhysical[per.physicalName]
            return {
              ...per,
              unit: eightPhysicalObj.unit,
              text: eightPhysicalObj.text
            }
          })
      } catch (error) {
        console.log(error)
      }
    },
    async fetchReportDetailOther() {
      try {
        const { data } = await getReportDetailOther(this.id)
        this.baseEvaluationList = data.baseEvaluationList

        // 综合评价
        this.initAssessment(data.assessment)
      } catch (error) {
        console.log(error)
      }
    },
    async fetchReportDetailMap() {
      try {
        const { data } = await getReportDetailMap(this.id)
        // 生长发育图
        this.initGrowthMapList(data.growthMapList)
      } catch (error) {
        console.log(error)
      }
    },
    initAssessment(assessment) {
      this.assessment = assessment
      this.assessment.theMostStrongText = eightPhysical[this.assessment.theMostStrong].text || ''
      this.assessment.theMostWeaknessText = eightPhysical[this.assessment.theMostWeakness].text || ''
      if (!this.isUnlock) return
      const resultList = this.assessment.resultList
      const radarIndicator = []
      const aresList = []
      // const rich = {}
      for (const per of resultList) {
        radarIndicator.push({
          // name: eightPhysical[per.physicalName].text,
          // name: per.physicalName,
          physicalName: per.physicalName,
          max: 100
        })
        aresList.push(per.physicalValue)
      }

      this.radarEc.option.radar.indicator = radarIndicator
      this.radarEc.option.series[0].data[0].value = aresList
      this.showRadarEc = true
      // this.$refs.assessment_radar_canvas.init()
    },
    getAssessmentText(physicalName) {
      const obj = {
        standingJump: '下肢力量',
        tennisThrow: '上肢力量',
        balanceBeam: '反应平衡能力',
        sitAndReach: '柔韧性',
        tenMeterTurn: '灵敏素质',
        doubleJump: '协调素质'
      }
      return obj[physicalName]
    },
    initGrowthMapList(growthMapList) {
      // TODO: y轴区间 刻度 倒序
      this.growthMapList = growthMapList.map((per) => {
        const xAxisData = []
        const nationData = []
        const provinceData = []
        const gardenData = []
        const childData = []
        function pushDataValue(target, list, index) {
          // console.log(target, list, index)
          if (list[index]) target.push(list[index].resultValue)
        }
        for (let i = 0; i < per.gardenResultList.length; i++) {
          const perGarden = per.gardenResultList[i]
          // x轴暂以园级为准(理论上数据个数应一致)
          xAxisData.push(perGarden.inspectAge)
          pushDataValue(nationData, per.nationResultList, i)
          pushDataValue(provinceData, per.provinceResultList, i)
          pushDataValue(gardenData, per.gardenResultList, i)
          pushDataValue(childData, per.childResultList, i)
        }

        return {
          ...per,
          name: eightPhysical[per.itemName].text,
          unit: eightPhysical[per.itemName].unit,
          expand: false,
          ec: {
            option: {
              legend: {
                data: ['全国', '省级', '园级', '儿童']
              },
              yAxis: {
                type: 'value',
                scale: true,
                minInterval: 1
                // TODO: inverse
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisData
              },
              series: [
                {
                  name: '全国',
                  type: 'line',
                  data: nationData
                },
                {
                  name: '省级',
                  type: 'line',
                  data: provinceData
                },
                {
                  name: '园级',
                  type: 'line',
                  data: gardenData
                },
                {
                  name: '儿童',
                  type: 'line',
                  data: childData
                }
              ]
            }
          }
        }
      })
    },
    handleGrowthExpand(growth) {
      growth.expand = !growth.expand
    },
    handleEightClick(item) {
      // console.log(item)
      if (!this.isUnlock) {
        this.showUnlockPopup = true
        return
      }
      this.eightPopupItem = item

      this.showEightPopup = true
    },
    getEvaluation(key) {
      return this.baseEvaluationList.find((per) => per.itemKey === key)
    },
    hadnleRadarEcInited(chart) {
      console.log({ chart })
    },
    async handleSave() {
      try {
        const res = await getPoster()
        if (res.code === 200) {
          //
          const imgUrl = res.data

          downImgToAlbum(imgUrl)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async handleCollectClick() {
      const api = this.isCollect ? cancelCollect : collectProduct
      try {
        const res = await api({
          productId: this.id,
          productType: 3
        })
        if (res.code === 200) {
          this.isCollect = !this.isCollect
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleUnlockBoxClick() {
      this.showUnlockPopup = true
    },
    async handleUnlockClick() {
      if (this.pending) return

      this.pending = true
      try {
        const res = await this.$uniPromisify.appPayment({
          nonce_str: this.price,
          productId: this.id,
          productType: 2,
          productName: '专家报告',
          productNum: 1,
          totalPrice: this.price
        })
        console.log('ssss', res)
        if (res && res.errMsg === 'requestPayment:ok') {
          // 支付结果轮询？
          this.showUnlockPopup = false
          this.fetchReportDetail()
        } else {
          uni.showToast({
            icon: 'none',
            title: res.errMsg
          })
        }
      } catch (error) {
        console.log('pay error', error)
      }
      this.pending = false
    }
  },
  // 分享 & 对比
  onShareAppMessage(obj) {
    // console.log(obj)
    if (obj.target.id === 'share') {
      return {
        // title: '儿童体质小程序',
        imageUrl: '../../static/shareImg.png',
        path: '/pages/home/index'
      }
    } else if (obj.target.id === 'compare') {
      return {
        imageUrl: '../../static/shareImg.png',
        path: `/pagesSub/compare/index?compareReportId=${this.id}`
      }
    }
    // obj.target
  },
  onLoad(obj) {
    uni.hideShareMenu({
      menus: ['shareAppMessage', 'shareTimeline']
    })
    // console.log(obj)
    const { id } = obj
    this.id = id

    this.fetchReportPrice()
    this.fetchReportDetail()
    this.fetchIsCollect()
  }
}
</script>

<style lang="scss">
.reportExDetail_container {
  .reportdetail_content {
    position: relative;
    z-index: 1;
    padding: 30rpx 30rpx 15rpx;
  }

  .app_dashed_title {
    margin-top: 20rpx;
  }

  .exDetail_content {
    padding: 30rpx 30rpx 20rpx;
    margin-top: -20rpx;

    @include bgStriped(#f9dc6a, #dec254);
  }

  .result_table {
    position: relative;
    margin-top: 20rpx;
    padding: 20rpx;
    font-size: 30rpx;
    border-radius: 45rpx;
    box-shadow: 0px 10rpx 40rpx 0px rgba(0, 0, 0, 0.2);

    @include bgStriped(#00a8ff, #0b9be5);

    .table_row {
      display: flex;
      align-items: center;
      padding: 15rpx 0;
      border-radius: 30rpx;

      &:nth-child(2n) {
        background-color: #ffffc8;
      }

      &:nth-child(2n + 1) {
        background-color: #f7f7ad;
      }
      &.table_head {
        background-color: #ffff43;
      }
    }

    .table_cell {
      flex: 0 0 33.3%;
      text-align: center;
    }

    .lock_for_result {
      position: absolute;
      z-index: 1;
      top: 95rpx;
      right: 40rpx;
      bottom: 35rpx;
      left: 440rpx;

      &.lock_block_y:after {
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 170rpx;
        height: 281rpx;
      }
    }
  }

  .report_eightItem_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .report_eightItem {
      flex: 0 0 auto;
      margin-top: 30rpx;
    }
  }

  .lock_block {
    position: relative;
    @include bgPoint();

    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 37rpx;
      height: 43rpx;
      background-image: url('#{$BASEURL}/exrd_lock.png');
      background-size: contain;
      background-repeat: no-repeat;
    }

    &.lock_block_y:after {
      content: '';
      position: absolute;
      right: 34rpx;
      bottom: 41rpx;
      width: 240rpx;
      height: 398rpx;
      background-image: url('#{$BASEURL}/exrd_lock_y.png');
      background-size: contain;
      background-repeat: no-repeat;
    }

    &.lock_block_x:after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 600rpx;
      height: 190rpx;
      background-image: url('#{$BASEURL}/exrd_lock_x.png');
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  .eightItem_popup {
    .van-popup {
      transform: translate3d(-50%, -60%, 0);
    }
    .app_popup_content {
      padding: 280rpx 0 0;
      background-color: transparent;
    }

    .app_popup_close {
      top: 128rpx;
    }
    .eightItem_popup_content {
      position: relative;
      padding: 14rpx;
      border-radius: 45rpx;

      @include bgStriped(#00a7fd, #0b9be5);
    }

    .eight_comment {
      display: flex;
      align-items: center;
      min-height: 212rpx;
      padding: 42rpx 32rpx;
      // padding-right: 180rpx;
      background-color: #5ac7ff;
      font-size: 24rpx;
      color: #fff;
      border-radius: 35rpx;
      @include boxWithDashed(35rpx, $color: #007bf8, $padding: 6rpx);
      @include clearfix();
      .comment_text {
        flex: 1;
        margin-right: 20rpx;
      }
    }

    .eight_value {
      flex: 0 0 auto;
      @include boxWithDashed(50%, $color: #eeb84e, $padding: 6rpx);
      // position: absolute;
      // z-index: 1;
      // top: 50rpx;
      // right: 40rpx;
      width: 140rpx;
      height: 140rpx;
      background-color: #ffff43;
      border-radius: 50%;
      font-size: 24rpx;
      text-align: center;
      line-height: 139rpx;
      color: #000;
      box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.2);

      text {
        font-size: 50rpx;
        font-family: Impact;
        font-weight: 600;
      }
    }

    .eight_title {
      position: absolute;
      left: 0;
      top: -280rpx;
      z-index: 1;
      height: 298rpx;
      width: 100%;
      background-size: auto 100%;
      background-repeat: no-repeat;

      &.eight_title_height {
        background-image: url('#{$BASEURL}/ep_title_height.png');
      }
      &.eight_title_weight {
        background-image: url('#{$BASEURL}/ep_title_weight.png');
      }
      &.eight_title_standingJump {
        background-image: url('#{$BASEURL}/ep_title_standingJump.png');
      }
      &.eight_title_tennisThrow {
        background-image: url('#{$BASEURL}/ep_title_tennisThrow.png');
      }
      &.eight_title_balanceBeam {
        background-image: url('#{$BASEURL}/ep_title_balanceBeam.png');
      }
      &.eight_title_sitAndReach {
        background-image: url('#{$BASEURL}/ep_title_sitAndReach.png');
      }
      &.eight_title_tenMeterTurn {
        background-image: url('#{$BASEURL}/ep_title_tenMeterTurn.png');
      }
      &.eight_title_doubleJump {
        background-image: url('#{$BASEURL}/ep_title_doubleJump.png');
      }
    }

    .rank_with_legend {
      margin-top: 15rpx;
    }
  }

  .evaluation_box {
    padding: 47rpx 30rpx 30rpx;
    background-color: #ffffd7;
    border-radius: 45rpx;
    box-shadow: 0px 102px 402px 0px rgba(0, 0, 0, 0.2);
    font-size: 30rpx;
    margin-top: 20rpx;

    .text_center {
      display: block;
      text-align: center;
    }
  }

  .evaluation_bmi {
    .evaluation_img {
      position: relative;
      padding-top: 200rpx;
      height: 320rpx;
      margin-top: 20rpx;

      background-image: url('#{$BASEURL}/evaluation_bmi.png');
      background-size: contain;
      background-position: top center;
      background-repeat: no-repeat;
    }

    .mark {
      position: absolute;
      bottom: 0;
      padding-top: 80rpx;
      text-align: center;
      background-image: url('#{$BASEURL}/evaluation_bmi_mark.png');
      background-position: center 20rpx;
      background-size: 40rpx 48rpx;
      background-repeat: no-repeat;
    }

    .bmi_remark {
      margin-top: 20rpx;
      text-align: center;
      view {
        display: inline-block;
        text-align: left;
        // height: 60rpx;
        // line-height: 60rpx;
        padding: 15rpx 25rpx;
        background-color: #f4d661;
        border-radius: 30rpx;
      }
    }

    .bmi_summary {
      margin-top: 20rpx;
    }

    .bmi_bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30rpx;

      .icon {
        width: 40rpx;
        height: 40rpx;
        background-image: url('#{$BASEURL}/evaluation_bmi_icon.png');
        background-size: contain;
        margin-right: 45rpx;
      }
    }

    .lock_for_bmi {
      height: 410rpx;
      width: 100%;
      margin-top: -110rpx;

      &.lock_block_y:after {
        bottom: 40rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .bmi_popup {
    .app_popup_content {
      background-color: #ffffd7;
    }

    .bmi_popup_img {
      margin: 0 auto;
      width: 305rpx;
      height: 270rpx;
      background-size: contain;
      background-image: url('#{$BASEURL}/evaluation_bmi_popup.png');
    }

    .bmi_popup_text {
      font-size: 30rpx;
      display: block;
      margin-top: 40rpx;
    }

    .bmi_popup_bottom {
      margin-top: 50rpx;
      text-align: center;
    }
  }

  .evaluation_targetHeight {
    .evaluation_img {
      position: relative;
      height: 237rpx;
      width: 259rpx;
      margin: 0 auto 38rpx;

      background-image: url('#{$BASEURL}/evaluation_targetHeight.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .lock_for_targetHeight {
      height: 870rpx;
      width: 100%;
      margin: 13rpx auto 0;
    }

    .evaluation_content {
      margin-top: 45rpx;
    }
  }

  .evaluation_bornWay {
    .bornWay_row {
      text-align: center;
      margin-bottom: 44rpx;
    }
    .bornWay_value {
      display: inline-block;
      height: 80rpx;
      line-height: 78rpx;
      padding: 0 32rpx;
      font-weight: 600;
      font-size: 40rpx;
      background-color: #ffe16d;
      border-radius: 40rpx;
    }
    .evaluation_img {
      height: 304rpx;
      width: 388rpx;
      margin: 112rpx auto 0;

      background-image: url('#{$BASEURL}/evaluation_bornWay.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .lock_for_bornWay {
      height: 750rpx;
      width: 100%;
    }
  }

  .evaluation_healthDiet {
    font-size: 30rpx;
    & > text {
      display: block;
    }

    .text_center {
      margin-top: 40rpx;
    }

    .healthDiet_content {
      margin-top: 20rpx;
      padding: 45rpx 30rpx;

      border-radius: 30rpx;
      @include bgStriped(#f9dc6a, #dec254);

      box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.1);
    }

    .lock_for_healthDiet {
      margin-top: 40rpx;
      height: 288rpx;
      width: 100%;
    }
  }

  .evaluation_drReview {
    .evaluation_img {
      position: relative;
      height: 386rpx;
      width: 487rpx;
      margin: 0 auto 40rpx;

      background-image: url('#{$BASEURL}/evaluation_drReview.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .drReview_value {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column;
      right: 30rpx;
      bottom: 65rpx;
      width: 200rpx;
      height: 200rpx;
      font-size: 30rpx;

      .value {
        font-size: 90rpx;
        line-height: 90rpx;
        font-weight: 600;
        font-family: Impact;
      }
    }

    .lock_for_drReview {
      margin-top: 40rpx;
      height: 600rpx;
      width: 100%;
    }

    .drReview_content {
      margin-top: 30rpx;
      padding: 45rpx 30rpx;

      border-radius: 30rpx;
      @include bgStriped(#f9dc6a, #dec254);

      box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.1);
    }
  }

  .assessment_radar {
    position: relative;
    width: 600rpx;
    height: 600rpx;
    padding: 100rpx;
    margin: 0 auto;
    .uni-ec-canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .assessment_icon {
      position: absolute;
      height: 100rpx;
      width: 100rpx;
      background-size: 120%;
      background-repeat: no-repeat;
      background-position: center center;

      text {
        position: absolute;
        color: #ddd;
        text-align: center;
        left: 50%;
        bottom: -20rpx;
        transform: translateX(-50%);
        font-size: 24rpx;
        white-space: nowrap;
      }

      &:nth-of-type(1) {
        left: 50%;
        top: -14rpx;
        transform: translateX(-50%);
      }
      &:nth-of-type(2) {
        right: 500rpx;
        top: 120rpx;
      }
      &:nth-of-type(3) {
        right: 500rpx;
        bottom: 120rpx;
      }
      &:nth-of-type(4) {
        left: 50%;
        bottom: -14rpx;
        transform: translateX(-50%);
      }
      &:nth-of-type(5) {
        left: 500rpx;
        bottom: 120rpx;
      }
      &:nth-of-type(6) {
        left: 500rpx;
        top: 120rpx;
      }

      &.standingJump {
        background-image: url('#{$BASEURL}/assessment_standingJump.png');
      }
      &.tennisThrow {
        background-image: url('#{$BASEURL}/assessment_tennisThrow.png');
      }
      &.balanceBeam {
        background-image: url('#{$BASEURL}/assessment_balanceBeam.png');
      }
      &.sitAndReach {
        background-image: url('#{$BASEURL}/assessment_sitAndReach.png');
      }
      &.tenMeterTurn {
        background-image: url('#{$BASEURL}/assessment_tenMeterTurn.png');
      }
      &.doubleJump {
        background-image: url('#{$BASEURL}/assessment_doubleJump.png');
      }
    }
  }

  .evaluation_assessment {
    font-size: 30rpx;

    & > text {
      margin-top: 70rpx;
      display: block;
    }
    .text_center {
      font-weight: 600;
    }

    .lock_for_assessment.lock_block_y {
      height: 660rpx;
      width: 100%;
    }

    .lock_for_assessment.lock_block_x {
      height: 200rpx;
      width: 100%;
      margin-top: 40rpx;
    }
  }

  .growth_box {
    padding: 30rpx;
    background-color: #ffffd7;
    border-radius: 45rpx;
    box-shadow: 0px 102px 402px 0px rgba(0, 0, 0, 0.2);
    font-size: 30rpx;
    margin-top: 20rpx;
    // transition: all 0.5s;

    .growth_box_top {
      display: flex;
      align-items: center;
    }

    .growth_icon {
      height: 100rpx;
      width: 100rpx;
      margin-right: 20rpx;
      background-repeat: no-repeat;
      background-size: auto 100%;

      &.height {
        background-image: url('#{$BASEURL}/rd_height.png');
      }
      &.weight {
        background-image: url('#{$BASEURL}/rd_weight.png');
      }
      &.standingJump {
        background-image: url('#{$BASEURL}/rd_standingJump.png');
      }
      &.tennisThrow {
        background-image: url('#{$BASEURL}/rd_tennisThrow.png');
      }
      &.balanceBeam {
        background-image: url('#{$BASEURL}/rd_balanceBeam.png');
      }
      &.sitAndReach {
        background-image: url('#{$BASEURL}/rd_sitAndReach.png');
      }
      &.tenMeterTurn {
        background-image: url('#{$BASEURL}/rd_tenMeterTurn.png');
      }
      &.doubleJump {
        background-image: url('#{$BASEURL}/rd_doubleJump.png');
      }
    }

    .change_text {
      color: #999999;
    }

    .g_top_content {
      flex: 1;
    }

    .change_btn {
      width: 140rpx;
      height: 60rpx;
      line-height: 58rpx;
      border-radius: 30rpx;
      background-color: #ffe16d;
      text-align: center;
      margin-right: 20rpx;
    }

    .van-icon {
      font-size: 40rpx;
      padding: 5rpx;
    }

    .lock_for_growth {
      overflow: hidden;
      height: 0;
      width: 100%;
      transition: all 0.5s;
      &.expand {
        transition: all 0.5s;
        height: 840rpx;
        margin-top: 40rpx;
      }
    }

    .growth_content {
      overflow: hidden;
      height: 0;
      width: 100%;
      transition: all 0.5s;
      &.expand {
        transition: all 0.5s;
        height: auto;
        margin-top: 40rpx;
      }
    }

    .growth_line {
      height: 400rpx;
      width: 100%;

      .uni-ec-canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .growth_unit_row {
      position: relative;
      color: #999999;
      padding-left: 50rpx;

      &::before {
        content: '';
        position: absolute;
        left: 10rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #00a7fd;
      }
    }

    .growth_bottom {
      font-size: 24rpx;
      margin-top: 30rpx;
      padding: 45rpx 30rpx;

      border-radius: 30rpx;
      @include bgStriped(#f9dc6a, #dec254);

      box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.1);

      view {
        font-weight: 600;
      }
    }
  }

  .exDetail_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    background-color: #ffff43;

    .rd_button {
      height: 80rpx;
      line-height: 78rpx;
      color: #fff;
      background-color: #333;
      border-radius: 40rpx;
      padding: 0 25rpx 0 80rpx;
      font-size: 30rpx;

      background-size: 50rpx 50rpx;
      background-repeat: no-repeat;
      background-position: 20rpx center;

      &.save {
        background-image: url('#{$BASEURL}/rd_icon_save.png');
      }
      &.share {
        background-image: url('#{$BASEURL}/rd_icon_share.png');
      }
      &.compare {
        background-image: url('#{$BASEURL}/rd_icon_compare.png');
      }
      &.collect {
        background-image: url('#{$BASEURL}/rd_icon_collect.png');
      }
      &.unCollect {
        padding: 0 10rpx 0 40rpx;
        background-position: 0 center;
        background-size: 40rpx 40rpx;
        background-image: url('#{$BASEURL}/cancelCollection-icon.png');
        font-size: 24rpx;
      }
    }

    .to_unlock_btn {
      margin: 0 auto;
      display: inline-block;
      border-radius: 40rpx;
      font-size: 40rpx;
      color: #fff;
      padding: 0 40rpx;
      height: 80rpx;
      line-height: 78rpx;
      background-color: #ffa200;
    }
  }

  .unlock_popup {
    font-size: 30rpx;
    .unlock_popup_switchList {
      border-top: 1rpx solid #ccc;
      border-bottom: 1rpx solid #ccc;
      padding: 40rpx 0;
      margin: 40rpx 0;
    }

    .per_unlock {
      display: flex;
      align-items: center;
      justify-content: space-between;

      & ~ .per_unlock {
        margin-top: 40rpx;
      }

      .unlock_switch {
        display: flex;
        align-items: center;
      }
    }

    .unlock_popup_bottom {
      display: flex;
      justify-content: flex-end;
    }

    .bottom_item {
      .tip {
        font-size: 24rpx;
        color: #ff9600;
        text-align: center;

        text {
          font-size: 30rpx;
        }
      }

      .u_p_b_btn {
        height: 80rpx;
        line-height: 78rpx;
        padding: 0 30rpx;
        background-color: #ff9600;
        color: #fff;
        border-radius: 40rpx;
        font-size: 24rpx;
        text-align: center;
        margin-top: 18rpx;

        text {
          display: inline-block;
          padding-right: 27rpx;
          font-size: 30rpx;
        }
      }
    }
  }
}
</style>
